<template>
  <div class="lucky-game-center">
    <!-- 固定在页面上的粒子背景 -->
    <div class="particles" id="particles"></div>
    
    <!-- 固定在页面上的装饰元素 -->
    <div class="decoration dec-1">✦</div>
    <div class="decoration dec-2">❈</div>
    <div class="decoration dec-3">❖</div>
    <div class="decoration dec-4">✤</div>
    
    <div class="container">
      <div class="header">
        <div class="title-container">
          <h1 class="title">大幸运</h1>
          <p class="subtitle">请永远相信美好的事情即将发生······</p>
        </div>
      </div>
      
      <div class="divider"></div>
      
      <div class="intro">
        <h2>幸运游戏中心</h2>
        <p>欢迎来到大幸运游戏中心，这里汇集了各种幸运游戏，给您带来无限乐趣和惊喜！</p>
        <p>选择您喜欢的游戏，体验心跳加速的感觉，让幸运女神常伴左右！</p>
        
        <ul>
          <li><i class="fas fa-star"></i> 双色球：每周二、四、日开奖，千万大奖等您来拿</li>
          <li><i class="fas fa-star"></i> 大转盘：每日免费旋转，惊喜礼品送不停</li>
          <li><i class="fas fa-star"></i> 猜大小：简单刺激，快速赢取幸运金币</li>
          <li><i class="fas fa-star"></i> 赛马场：每周六激情开赛，预测冠军赢大奖</li>
        </ul>
        
        <div class="lucky-numbers">
          <div 
            class="number-ball" 
            v-for="n in 7" 
            :key="n" 
            :style="{ animationDelay: `${n*0.2}s` }"
          >
            {{ Math.floor(Math.random() * 9) + 1 }}
          </div>
        </div>
      </div>
      
      <div class="games-container">
        <div 
          class="game-card" 
          v-for="(game, index) in games" 
          :key="index"
          @click="turnToQueue(game.path)"
          @mouseenter="activeIndex = index"
          @mouseleave="activeIndex = -1"
        >
          <div class="game-icon">
            <i :class="game.icon"></i>
          </div>
          <h2 class="game-name">{{ game.name }}</h2>
          <p class="game-desc">{{ game.description }}</p>
        </div>
      </div>
      
      <div class="footer">
        <p>© 2023 大幸运游戏中心 | 让幸运与美好常伴您左右</p>
        <p style="margin-top: 10px;">服务热线: 400-888-8888 | 客服邮箱: service@dalucky.com</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LuckHome',
  data() {
    return {
      activeIndex: -1,
      games: [
        {
          name: '双色球',
          icon: 'fas fa-dice',
          description: '选择幸运号码，赢取千万大奖，机会就在眼前！',
          path:'/queue'
        },
        {
          name: '大转盘',
          icon: 'fas fa-sync-alt',
          description: '转动幸运轮盘，惊喜奖品等您来拿，好运不停转！',
          path:'/queue'
        },
        {
          name: '猜大小',
          icon: 'fas fa-chart-bar',
          description: '简单刺激猜大小，考验直觉与运气，一猜即中！',
           path:'/queue'
        },
        {
          name: '赛马场',
          icon: 'fas fa-horse',
          description: '激情赛马比赛，选择冠军马匹，冲刺终点赢大奖！',
           path:'/queue'
        }
      ]
    };
  },
  mounted() {
    this.createParticles();
  },
  methods: {
    createParticles() {
      const container = document.getElementById('particles');
      const particleCount = 60;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // 随机属性
        const size = Math.random() * 15 + 5;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100 + 100;
        const animationDuration = Math.random() * 20 + 15;
        const animationDelay = Math.random() * 5;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        particle.style.animationDuration = `${animationDuration}s`;
        particle.style.animationDelay = `${animationDelay}s`;
        
        container.appendChild(particle);
      }
    },
    turnToQueue(val) {
      console.log('跳转到猜大小队列');
      try {
        // 添加额外的日志检查
        console.log('当前路由路径:', this.$route.path);
        console.log('路由实例:', this.$router);
        
        // 确保路由存在
        if (this.$router) {
          this.$router.push(val);
        } else {
          console.error('Router is not available');
        }
      } catch (error) {
        console.error('路由跳转失败:', error);
      }
    }
  }
};
</script>

<style scoped>
/* 添加修复的CSS */
.particles {
  z-index: 1; /* 确保在背景层 */
}

.container {
  z-index: 10; /* 确保内容在粒子之上 */
}

/* 确保所有可点击元素都在内容层 */
.game-card, .intro li {
  position: relative;
  z-index: 10;
}

.intro li {
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 8px;
}

.intro li:hover {
  background: rgba(255, 235, 59, 0.2);
  transform: translateX(5px);
}

.intro li i {
  pointer-events: none; /* 防止图标拦截点击事件 */
}

/* 其他原有样式保持不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lucky-game-center {
  font-family: 'Noto Sans SC', sans-serif;
  background: linear-gradient(135deg, #ff1a1a 0%, #b30000 100%);
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.3);
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

.container {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  z-index: 10;
  padding: 50px 20px;
  position: relative;
}

.header {
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.title-container {
  position: relative;
  display: inline-block;
}

.title {
  font-family: 'Ma Shan Zheng', cursive;
  font-size: 4.8rem;
  color: #FFEB3B;
  text-shadow: 0 0 20px rgba(255, 235, 59, 0.8);
  letter-spacing: 8px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  animation: titleFloat 3s ease-in-out infinite;
}

.subtitle {
  position: absolute;
  left: -35%;
  bottom: 0;
  font-size: 1.2rem;
  color: #FFAB4C;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: right;
  transform: translateY(100%);
  white-space: nowrap;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 165, 76, 0.6);
  animation: subtitleGlow 3s infinite alternate;
  border: 2px solid #FFD700;
  border-radius: 10px;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.games-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 35px;
  margin-top: 40px;
}

.game-card {
  background: linear-gradient(145deg, rgba(255, 82, 82, 0.9), rgba(183, 28, 28, 0.9));
  border-radius: 18px;
  padding: 45px 25px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(255, 235, 59, 0.35);
  backdrop-filter: blur(4px);
  transform: translateY(0);
}

.game-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 235, 59, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 235, 59, 0.15) 0%, transparent 40%);
  pointer-events: none;
}

.game-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="rgba(255,235,59,0.1)" stroke-width="1"/></svg>');
}

.game-card:hover {
  transform: scale(1.08) translateY(-8px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35), 0 0 35px rgba(255, 235, 59, 0.65);
  z-index: 20;
  border-color: rgba(255, 235, 59, 0.7);
  background: linear-gradient(145deg, #ff5252, #b71c1c);
}

.game-icon {
  font-size: 3.8rem;
  margin-bottom: 25px;
  color: #FFEB3B;
  text-shadow: 0 0 15px rgba(255, 235, 59, 0.7);
  transition: transform 0.3s ease;
}

.game-card:hover .game-icon {
  transform: scale(1.15);
  animation: iconPulse 1s infinite alternate;
}

.game-name {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 18px;
  color: #FFEB3B;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.game-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 260px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 400;
}

.divider {
  height: 4px;
  background: linear-gradient(90deg, transparent, #FFEB3B, transparent);
  width: 65%;
  margin: 40px auto;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
}

.decoration {
  position: fixed;
  font-size: 2.2rem;
  color: rgba(255, 235, 59, 0.25);
  z-index: 1;
  animation: spin 20s linear infinite;
  pointer-events: none;
}

.dec-1 { top: 10%; left: 5%; }
.dec-2 { top: 15%; right: 10%; animation-delay: -5s; }
.dec-3 { bottom: 20%; left: 8%; animation-delay: -10s; }
.dec-4 { bottom: 10%; right: 7%; animation-delay: -15s; }

.footer {
  margin-top: 70px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  padding: 25px;
  position: relative;
  z-index: 10;
}

.intro {
  max-width: 800px;
  margin: 0 auto 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 235, 59, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.intro h2 {
  color: #FFEB3B;
  margin-bottom: 20px;
  font-size: 2.2rem;
  text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

.intro p {
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.intro ul {
  text-align: left;
  max-width: 600px;
  margin: 20px auto;
  padding-left: 30px;
}

.intro li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.intro li i {
  color: #FFEB3B;
  margin-right: 10px;
}

.lucky-numbers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.number-ball {
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #ff5252, #b71c1c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFEB3B;
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.5);
  border: 2px solid #FFEB3B;
  animation: ballPulse 1.5s infinite alternate;
}

@keyframes ballPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* 动画效果 */
@keyframes titleFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes subtitleGlow {
  0% { text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
  100% { text-shadow: 0 0 12px rgba(255, 235, 59, 0.5); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes iconPulse {
  0% { text-shadow: 0 0 15px rgba(255, 235, 59, 0.7); }
  100% { text-shadow: 0 0 25px rgba(255, 235, 59, 0.9), 0 0 35px rgba(255, 235, 59, 0.5); }
}

@media (max-width: 768px) {
  .title { font-size: 3.5rem; }
  .subtitle { font-size: 1rem; }
  .games-container { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
  .intro { padding: 20px; }
}

@media (max-width: 480px) {
  .title { font-size: 2.8rem; letter-spacing: 5px; }
  .subtitle { font-size: 0.9rem; letter-spacing: 2px; }
  .number-ball {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}
</style>